<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox"  v-model="all">
		<label for="toggle-all"></label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus v-model="task" @keydown.enter="key" />
	</header>
</template>

<script>
	export default {
		props: {
			arr:{
				type: Array
			}
		},
		data () {
			return {
				task: "",
			}
		},
		methods: {
			key(){
				this.$emit("key", this.task)
				this.task = ""
			},
			
		},

		computed: {
			all: {
				get(){
					return this.arr.every(item => item.isDone)
				},
				set(val){
					return this.arr.forEach(ele => ele.isDone = val);
				}
			}
		}
	}
</script>
